HTML Widgets

This is an overview of HTMLWidgets and associated subprojects.

The HTMLWidgets family of visualization tools are JavaScript packages with R bindings so you can use them within your R code.

Leaflet

Leaflet is a popular open-source JavaScript API for placing zoomable maps (sometimes called “slippy maps”) in a browser. The Leaflet for R project wraps this JavaScript API in R bindings – so you don’t need to program in JavaScript, CSS, and HTML, you just program in R.

The Leaflet for R API is located here.

A very simple map of our class location is drawn in the code snip-it below:

# HTMLWidgets -- Leaflet Example
# ------------------------------
library(leaflet)
leaflet() %>%
  setView(-96.737010, 43.522951, zoom = 16) %>% 
  addTiles() %>%
  addMarkers(-96.737010, 43.522951, popup = "Augie!") 

You can accomplish quite a bit with the Leaflet for R package. The next example is uses a weather-radar set of tiles for the backdrop (available over the US only), and starts zoomed-out a bit, but still centered on Augie:

# Leaflet w/weather tiles
# -----------------------
leaflet() %>% addTiles() %>% setView(-96.737010, 43.522951, zoom = 6) %>%
  addWMSTiles(
    "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi",
    layers = "nexrad-n0r-900913",
    options = WMSTileOptions(format = "image/png", transparent = TRUE),
    attribution = "Weather data © 2012 IEM Nexrad"
  )

To check our work, we can view a similar area from the National Weather Service

Dygraphs

Dygraphs is for time-series data, and includes features like interactive range selectors. The dygraphs for R API shows the packages many features.

# Dygraphs example 1
# ------------------
library(dygraphs)
lungDeaths <- cbind(mdeaths, fdeaths)
dygraph(lungDeaths) %>% dyRangeSelector()

A stacked graph:

# Dygraphs example 2
# ------------------
dygraph(lungDeaths) %>%
  dySeries("mdeaths", label = "Male") %>%
  dySeries("fdeaths", label = "Female") %>%
  dyOptions(stackedGraph = TRUE) %>%
  dyRangeSelector(height = 20)

Plotly

Plotly is a way to get our ggplot2 visualizations to the web, and it also ads some interesting interactive features. There are many different variations available; the API is here.

# Plotly
# ------
library(ggplot2)
library(plotly)
p <- ggplot(data = diamonds, aes(x = cut, fill = clarity)) +
  geom_bar(position = "dodge")
ggplotly(p)

Another plot (with warning/informational messages)

d <- diamonds[sample(nrow(diamonds), 500), ]
plot_ly(d, x = d$carat, y = d$price, 
        text = paste("Clarity: ", d$clarity),
        mode = "markers", color = d$carat, size = d$carat)

No trace type specified:
  Based on info supplied, a 'scatter' trace seems appropriate.
  Read more about this trace type -> https://plot.ly/r/reference/#scatter
`line.width` does not currently support multiple values.No trace type specified:
  Based on info supplied, a 'scatter' trace seems appropriate.
  Read more about this trace type -> https://plot.ly/r/reference/#scatter
`line.width` does not currently support multiple values.

NetworkD3

The next set of visualizations are created with the [NetworkD3[(http://christophergandrud.github.io/networkD3/)] package.

Force-Directed Network Graphs

library(networkD3)
data(MisLinks, MisNodes)
forceNetwork(Links = MisLinks, Nodes = MisNodes,
             Source = "source", Target = "target",
             Value = "value", NodeID = "name",
             Group = "group", opacity = 0.8)

Sankey Diagrams

# Sankey Diagram
# --------------
# Load energy projection data
# Load energy projection data
URL <- paste0(
  "https://cdn.rawgit.com/christophergandrud/networkD3/",
  "master/JSONdata/energy.json")
Energy <- jsonlite::fromJSON(URL)
# Plot
sankeyNetwork(Links = Energy$links, Nodes = Energy$nodes, Source = "source",
              Target = "target", Value = "value", NodeID = "name",
              units = "TWh", fontSize = 12, nodeWidth = 30)

Radial Network:

# Radial network
# --------------
URL <- paste0(
  "https://cdn.rawgit.com/christophergandrud/networkD3/",
  "master/JSONdata//flare.json")
## Convert to list format
Flare <- jsonlite::fromJSON(URL, simplifyDataFrame = FALSE)
# Use subset of data for more readable diagram
Flare$children = Flare$children[1:3]
radialNetwork(List = Flare, fontSize = 10, opacity = 0.9)

Diagonal Network

# Diagonal Network
diagonalNetwork(List = Flare, fontSize = 10, opacity = 0.9)

Wrap-up

These are some of the visualization tools in the HTML Widgets library.

Thursday, March 7, 2019